import React, { useState } from 'react';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  StatusBar,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useNavigation } from '@react-navigation/native';
import { 
  ResponsiveContainer, 
  ResponsiveText,
  scale,
  Sizes
} from '../../components';

// FAQ data
const faqItems = [
  {
    id: '1',
    question: '我们的服务流程是什么？',
    answer: '',
  },
  {
    id: '2',
    question: '费用是如何计算的？',
    answer: '我们有一个计时计费供我们的工作人员与您确认他们的开始时间和结束时间。我们有一个计时器供我们的工作人员。',
  },
  {
    id: '3',
    question: '我可以获得赔偿吗？',
    answer: '',
  },
  {
    id: '4',
    question: '我该如何投诉',
    answer: '',
  },
  {
    id: '5',
    question: '哪里可以获取发票？',
    answer: '',
  },
  {
    id: '6',
    question: '中途可以换服务人员吗？',
    answer: '',
  },
];

const FAQScreen: React.FC = () => {
  const [expandedId, setExpandedId] = useState<string>('2');
  const navigation = useNavigation();

  const toggleExpand = (id: string) => {
    if (expandedId === id) {
      setExpandedId('');
    } else {
      setExpandedId(id);
    }
  };

  const handleBack = () => {
    navigation.goBack();
  };

  const handleChatPress = () => {
    navigation.navigate('Chat');
  };

  return (
    <ResponsiveContainer style={styles.container}>
      <StatusBar backgroundColor="#FFFFFF" barStyle="dark-content" />
      
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
          <Icon name="chevron-back" size={scale(22)} color="#000" />
        </TouchableOpacity>
        <ResponsiveText style={styles.headerTitle}>常见问题</ResponsiveText>
        <View style={styles.placeholderRight} />
      </View>

      {/* Contact options */}
      <View style={styles.contactOptions}>
        <TouchableOpacity style={styles.contactOption} onPress={handleChatPress}>
          <Icon name="headset-outline" size={scale(24)} color="#333" />
          <ResponsiveText style={styles.contactText}>聊天</ResponsiveText>
        </TouchableOpacity>
        <TouchableOpacity style={styles.contactOption}>
          <Icon name="call-outline" size={scale(24)} color="#333" />
          <ResponsiveText style={styles.contactText}>电话</ResponsiveText>
        </TouchableOpacity>
      </View>

      {/* FAQ Title */}
      <View style={styles.faqTitleContainer}>
        <ResponsiveText style={styles.faqTitle}>常见问题</ResponsiveText>
      </View>

      {/* FAQ List */}
      <ScrollView style={styles.scrollContainer}>
        {faqItems.map((item) => (
          <View key={item.id} style={styles.faqItem}>
            <TouchableOpacity 
              style={styles.questionContainer}
              onPress={() => toggleExpand(item.id)}
            >
              <ResponsiveText style={styles.questionText}>{item.question}</ResponsiveText>
              <AntDesign 
                name={expandedId === item.id ? "up" : "down"} 
                size={scale(18)} 
                color="#999" 
              />
            </TouchableOpacity>
            
            {expandedId === item.id && item.answer && (
              <View style={styles.answerContainer}>
                <ResponsiveText style={styles.answerText}>{item.answer}</ResponsiveText>
              </View>
            )}
          </View>
        ))}
      </ScrollView>
    </ResponsiveContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: scale(50),
    paddingHorizontal: scale(15),
    backgroundColor: '#FFFFFF',
  },
  headerTitle: {
    fontSize: scale(16),
    fontWeight: '500',
    color: '#000000',
  },
  backButton: {
    padding: scale(5),
  },
  placeholderRight: {
    width: scale(20),
  },
  contactOptions: {
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    paddingVertical: scale(20),
    paddingHorizontal: scale(40),
    marginBottom: scale(10),
    justifyContent: 'space-between',
  },
  contactOption: {
    alignItems: 'center',
    paddingHorizontal: scale(30),
  },
  contactText: {
    marginTop: scale(8),
    fontSize: scale(14),
    color: '#333',
  },
  faqTitleContainer: {
    paddingHorizontal: scale(15),
    paddingVertical: scale(12),
  },
  faqTitle: {
    fontSize: scale(15),
    color: '#666',
    fontWeight: '500',
  },
  scrollContainer: {
    flex: 1,
  },
  faqItem: {
    backgroundColor: '#FFFFFF',
    marginBottom: scale(1),
  },
  questionContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: scale(15),
    paddingVertical: scale(15),
  },
  questionText: {
    fontSize: scale(14),
    color: '#333',
    flex: 1,
  },
  answerContainer: {
    paddingHorizontal: scale(15),
    paddingBottom: scale(15),
  },
  answerText: {
    fontSize: scale(14),
    color: '#666',
    lineHeight: scale(20),
  },
});

export default FAQScreen; 